<template>
  <div>
    <el-button @click="deleteMany()">批量删除</el-button>
    <el-button @click="dialogVisible=true">添加新闻</el-button>
    <el-table :data="pageInfo.list" border stripe  @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="新闻编号" prop="id"></el-table-column>
      <el-table-column label="新闻标题" prop="title"></el-table-column>
      <el-table-column label="作者" prop="author"></el-table-column>
      <el-table-column label="日期" prop="createDate"></el-table-column>
      <el-table-column label="新闻内容">
        <template slot-scope="abc">
          新华社报道：{{abc.row.content}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="updateNews(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteNews(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="sizes, prev, pager, next, jumper, ->, total"
      :total="pageInfo.total"
      :page-size.sync="pageInfo.pageSize"
      :page-sizes="[3,6,9]"
      :current-page.sync="pageInfo.pageNum"
      :pager-count="5"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form"
               :model="news"
               label-width="80px"
               :rules="formRules"
               label-position="left"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="news.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="news.content" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input type="text" v-model="news.author" placeholder="请输入作者"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createDate">
          <el-date-picker v-model="news.createDate"
                          type="date"
                          placeholder="请选择日期"
                          value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item align="left">
          <el-button type="primary" @click="addNews">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "newsList",
    data(){
      return {
        pageInfo:{},
        selectedNews:[],
        news:{},
        formRules:{//表单校验规则
          title:[//username项的校验规则，每一项规则可以有多个要求
            {required:true,message:"标题不能为空",trigger:"blur"}
          ],
          content:[//password项的校验规则
            {required:true,message:"内容不能为空",trigger:"blur"}
          ],
          author:[//password项的校验规则
            {required:true,message:"作者不能为空",trigger:"blur"}
          ],
          createDate:[//password项的校验规则
            {required:true,message:"时间不能为空",trigger:"blur"}
          ]
        },
        dialogVisible:false
      }
    },
    methods:{
      handleSizeChange(value){
        this.getAllNews(this.pageInfo.pageNum,value);
      },
      handleCurrentChange(value){
        this.getAllNews(value,this.pageInfo.pageSize);
      },
      deleteMany(){
        this.selectedNews.forEach((news,index)=>{
          console.log(news.id)
        })
      },
      handleSelectionChange(val){
        this.selectedNews=val;
      },
      updateNews(news){
        this.$router.push({name:"updateNews",params:{news:news}});
      },
      deleteNews(id){
        this.$confirm('此操作将永久删除该新闻, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios({
            url:"/news/"+id,
            method:"DELETE"
          }).then((resp)=>{
            this.$message("删除成功！");
            this.getAllNews(this.pageInfo.pageNum,this.pageInfo.pageSize);
          });
        });

      },
      getAllNews(pageNo,pageSize){
        this.axios({
          url:"/page/news",
          method:"GET",
          params:{
            pageNo:pageNo,
            pageSize:pageSize
          }
        }).then((resp)=>{
          this.pageInfo=resp.data;
        });
      },
      addNews(){
        //通过this.$refs[”表单的ref“]获取表单
        this.$refs["form"].validate((valid)=>{
          //valid表示表单校验的结果 true|false
          if(valid){
            this.axios({
              url:"/news",
              method:"POST",
              data:this.news
            }).then((resp)=>{
              this.$message({
                type:"success",
                message:"添加成功的提示信息",
                duration:2000
              });
              this.dialogVisible=false;
              this.news={};
            });
          }
          return valid;
        })
      }
    },
    created(){
      this.getAllNews(1,3);
    }
  }
</script>
